<template>
  <div class="page-content">
    <div class="text-right">
      <el-button
        size="small"
        class="mb-2 d-print-none"
        v-if="guard.gua_contract_id"
        @click="printPage"
      >
        <i class="fa fa-print"></i>
        打印
      </el-button>
      <el-button
        class="mb-2 d-print-none"
        size="small"
        :loading="exportLoading"
        v-if="guard.gua_contract_id"
        @click="downloadDocx"
      >
        <i class="fa fa-download"></i>
        导出
      </el-button>
    </div>
    <div class="p-5 border-noprint" :id="printId">
      <div class="text-center">
        <h3 class="my-5">反担保合同</h3>
        <div class="text-right">
          合同编号：{{
            `${contract.gua_org_code || ''}[${guard.gua_contract_wno || ''}]反担字第${
              guard.gua_contract_no || ''
            }号`
          }}
        </div>
      </div>
      <div>
        <span>甲 方：</span>
        <span class="text-decoration">{{ guard.gua_entity || '' }}</span>
      </div>
      <div>
        <span>证件号：</span>
        <span class="text-decoration">{{ guard.gua_entity_cert_no || '' }}</span>
      </div>
      <div>
        <span>住 址：</span>
        <span class="text-decoration">{{ guard.gua_entity_address || '' }}</span>
      </div>
      <div>
        <span>联系电话：</span>
        <span class="text-decoration">{{ guard.gua_entity_mobile || '' }}</span>
      </div>
      <div class="mt-4">
        <span>乙方：</span>
        <span class="text-decoration">{{ contract.accept_entrust_entity_name || '' }}</span>
      </div>
      <div>
        <span>地址：</span>
        <span class="text-decoration">{{ contract.accept_entrust_entity_address || '' }}</span>
      </div>
      <div>
        <span>联系电话：</span>
        <span class="text-decoration">{{ contract.entrust_entity_phone || '' }}</span>
      </div>
      <p class="text-indent">
        <span class="mt-5">鉴于乙方为</span>
        <span class="text-decoration">{{ relatedData.customer_name || '-' }}</span>
        <span>在</span>
        <span class="text-decoration">{{ relatedData.bank_name || '' }}</span>
        <span>（以下简称债权人）的债务（编号为</span>
        <span class="text-decoration">{{ contract.credit_contract_no || '' }}</span>
        <span>
          号的{{ enumContractType[contract.contract_type] || '授信合同下' }}
          <span v-if="+contract.contract_type === 1">下</span>
          的借款）提供担保，甲方依照《中华人民共和国担保法》规定，自愿向乙方提供反担保，为明确双方的权利、义务，经协商一致特签订本合同，供双方共同遵守。
        </span>
      </p>
      <p class="text-indent">
        <span class="font-weight-bold">第一条：借款合同设立的借款种类、金额、利息及期限</span>
      </p>
      <p class="text-indent">
        <span>1.1 借款种类</span>
        <span class="text-decoration">&nbsp;&nbsp;{{ guaMethodText }}&nbsp;&nbsp;</span>
      </p>
      <p class="text-indent">
        <span>1.2 借款本金</span>
        <span class="text-decoration">&nbsp;&nbsp;{{ replyFundsNum }}&nbsp;&nbsp;</span>
        <span>万元整，（大写人民币</span>
        <span class="text-decoration">&nbsp;&nbsp;{{ loanFundsChinese }}&nbsp;&nbsp;</span>
        <span>）。</span>
      </p>
      <p class="text-indent">
        <span>1.3 借款期限</span>
        <span class="text-decoration">&nbsp;&nbsp;{{ loanYearsChinese }}&nbsp;&nbsp;</span>
        <span>年，自</span>
        <span class="text-decoration">
          &nbsp;&nbsp;{{ $utils.dateFormat(contract.load_date, 'yyyy 年 MM 月 dd 日') }}&nbsp;&nbsp;
        </span>
        <span>至</span>
        <span class="text-decoration">
          &nbsp;&nbsp;{{
            $utils.dateFormat(contract.load_end_date, 'yyyy 年 MM 月 dd 日')
          }}&nbsp;&nbsp;
        </span>
        <span>（以实际放款日为准）。</span>
      </p>
      <p class="text-indent"><span class="font-weight-bold">第二条：反担保范围</span></p>
      <p class="text-indent">
        2.1 乙方代借款人清偿的全部债务，包括：本金、利息、违约金、滞纳金、赔偿金等。
      </p>
      <p class="text-indent">
        2.2
        借款人与乙方签订的《委托担保合同》中约定的借款人应向乙方支付的违约金、滞纳金、赔偿金、担保费等。
      </p>
      <p class="text-indent">
        2.3 乙方行使追偿权而产生的费用，包括诉讼费、律师费、差旅费、鉴定费、评估费等费用。
      </p>
      <p class="text-indent">
        <span class="font-weight-bold">第三条：反担保方式及相关约定。</span>
      </p>
      <p class="text-indent">
        <span>甲方</span>
        <span class="text-decoration">{{ guard.gua_entity || '' }}</span>
        <span>按以下第</span>
        <span class="text-decoration">{{ guardMethod }}</span>
        <span>种方式提供反担保，具体约定见附件1、附件3。</span>
      </p>
      <p class="text-indent">3.1保证担保（包含下列3.1.1-3.1.3之间全部条款）。</p>
      <p class="text-indent">
        3.1.1 保证人自愿向乙方提供连带责任保证，附件1中另有约定的，按附件约定承担保证责任。
      </p>
      <p class="text-indent">
        3.1.2
        保证期间为借款合同到期之日起两年。借款到期银行同意债权展期的，保证期间至展期协议重新约定的债务履行期限届满之日后两年止。
      </p>
      <p class="text-indent">3.1.3 保证人提供主要财产清单，以证明其保证能力。</p>
      <p class="text-indent">3.2 质押担保（包含下列3.2.1-3.2.8.4之间全部条款）。</p>
      <p class="text-indent">
        <span>3.2.1 出质人</span>
        <span class="text-decoration">
          &nbsp;&nbsp;{{ isPledge ? guard.gua_entity || '' : '' }}&nbsp;&nbsp;
        </span>
        <span>自愿以所持的</span>
        <span class="text-decoration">&nbsp;&nbsp;{{ guardRate }}&nbsp;&nbsp;</span>
        <span>
          股权向乙方提供质押担保，质物详见本合同附件2《质物清单》。《质物清单》作为本合同附件，与本合同具有同等法律效力。
        </span>
      </p>
      <p class="text-indent">
        3.2.2
        《质物清单》对质物价值的约定，不作为乙方处分质物时的估价依据，不对乙方行使质权构成任何限制。
      </p>
      <p class="text-indent">
        3.2.3
        质权的效力及于质物所生的孳息，以及因质物毁损、灭失或被征用等而产生的保险金、赔偿金、补偿金或其他形式的替代物。
      </p>
      <p class="text-indent">
        3.2.4
        质物价值发生了不利于乙方的变动的，乙方有权要求借款人或出质人补足质物价值，借款人或出质人应在乙方要求的时间内补足。
      </p>
      <p class="text-indent">
        3.2.5
        质物移交乙方保管的，乙方有妥善保管质物的义务，因保管不善造成质物灭失或毁损的，乙方应当承担民事责任。乙方不能妥善保管质物可能使其灭失或毁损的，出质人可以要求乙方将质物提存，或要求借款人提前清偿债务而返还质物。
      </p>
      <p class="text-indent">
        3.2.6
        出质人所获得的质物的赔偿金、补偿金、保险金以及处分质物所得收益，乙方有权选择下列方式进行处理：
      </p>
      <p class="text-indent">A存入乙方指定帐户；</p>
      <p class="text-indent">B用于修复质物，以恢复质物的价值；</p>
      <p class="text-indent">C双方另行约定的其他方式。</p>
      <p class="text-indent">
        出质人或借款人提供符合乙方要求的新的担保的，出质人可将上述价款自由处分。
      </p>
      <p class="text-indent">
        3.2.7
        交付和登记。本合同签订后三日内，出质人应将质物或权利凭证交付乙方，乙方验收无误后应向出质人出具收押凭据。本合同项下质物依法须办理质押登记的，出质人和乙方应在合同签订后三日内到有关登记机关办理质押登记手续；登记事项发生变化依法需进行变更登记的，出质人和乙方应合同签订后三日内办理变更登记。质物的保管和登记费用由借款人承担。借款人按照合同约定履行完毕各项义务后，乙方应积极协助出质人办理注销登记手续，并将相关权属文件退还出质人。
      </p>
      <p class="text-indent">3.2.8 质物的处分。</p>
      <p class="text-indent">
        3.2.8.1
        发生下列情形之一，乙方有权将质物拍卖、变卖、兑现、提现，以所得价款优先受偿或按第3.2.6约定的其他方式处理；或经与出质人协商将质物折价以抵偿借款人所欠债务；
      </p>
      <p class="text-indent">A 借款到期（包括被宣布提前到期）借款人未予清偿；</p>
      <p class="text-indent">B 发生3.2.4所述情形，出质人或借款人未按乙方要求补足质物价值；</p>
      <p class="text-indent">C 乙方与出质人约定将质物兑现或提现偿还到期债务；</p>
      <p class="text-indent">D 乙方依法可以处分质物的其他情形。</p>
      <p class="text-indent">
        3.2.8.2
        质物的兑现或提现日期先于债务履行期届满日的，乙方可以在质物到期日兑现，并与出质人协商，将所得价款提前清偿所担保的债权或存入乙方指定账户，以保证借款人债务的履行。
      </p>
      <p class="text-indent">
        3.2.8.3 质物的兑现或提现日期后于债务履行期届满日，借款人在债务履行期满后 15
        天仍未清偿债务的，乙方有权将质物提前兑现或提现，以所得价款清偿所担保的债权，因提前兑现或提现产生的损失由借款人承担；如果质物在借款人债务履行期届满
        15 天内到期的，乙方应在质物到期日按第3.2.8.1约定的方式处分质物。
      </p>
      <p class="text-indent">
        3.2.8.4处分质物的所得在偿还质押担保范围内借款人的全部债务后还有剩余的，乙方应将剩余部分及时退还出质人。
      </p>
      <p class="text-indent">3.3 抵押担保（包含下列3.3.1-3.3.3.3之间全部条款）。</p>
      <p class="text-indent">3.3.1抵押物。</p>
      <p class="text-indent">
        3.3.1.1抵押人自愿向乙方提供抵押担保，并提供抵押物权属证明（批文、发票等）原件由乙方保管，抵押物详见《抵押物清单》。《抵押物清单》作为本合同附件3，与合同具有同等法律效力。
      </p>
      <p class="text-indent">
        3.3.1.2《抵押物清单》对抵押物价值的约定，不作为乙方处分该抵押物时的估价依据，不对乙方行使抵押权构成任何限制。
      </p>
      <p class="text-indent">
        3.3.1.3乙方抵押权的效力及于抵押物产生的孳息、抵押物的从物、从权利、附属物、添附物，以及因抵押物毁损、灭失或被征用而产生的保险金、赔偿金、补偿金或其他形式的替代物。
      </p>
      <p class="text-indent">
        3.3.1.4抵押人应妥善保管和使用抵押物，保证抵押物的完好，乙方有权随时检查抵押物的使用管理情况。抵押权存续期间，抵押人出租抵押物的，应当通知乙方并将抵押事实告知承租人，且出租期限不得长于借款期限。以其他方式处分抵押物的，应事先征得乙方书面同意，并将抵押事实告知买受人等相关人员。由此取得的收益，按照3.3.1.7条的约定处理。
      </p>
      <p class="text-indent">
        3.3.1.5抵押物发生或可能发生毁损、灭失的，抵押人应及时告知乙方，并立即采取措施防止损失扩大，及时向乙方提交有关负责人机关出具的毁损、灭失证明。
      </p>
      <p class="text-indent">
        3.3.1.6抵押人的行为足以使抵押物价值减少的，应停止其行为；造成抵押物价值减少时，抵押人应及时恢复抵押物的价值，或提供与减少的价值相当的担保。
      </p>
      <p class="text-indent">
        3.3.1.7抵押人所获得的抵押物的赔偿金、补偿金、保险金以及处分抵押物所得收益,乙方有权选择下列方式进行处理：
      </p>
      <p class="text-indent">A 存入乙方指定帐户，以担保借款人债务的履行；</p>
      <p class="text-indent">B 抵押人提供符合乙方要求的新担保的，抵押人可将上述价款自由处分。</p>
      <p class="text-indent">
        3.3.1.8抵押人因隐瞒抵押物存在权属争议、被查封、被扣押、已设定抵押或已出租等情况，而给乙方造成损失的应予以足额赔偿。
      </p>
      <p class="text-indent">3.3.2抵押登记。</p>
      <p class="text-indent">
        3.3.2.1本合同签订后,抵押人和乙方应及时到有关登记机关办理抵押登记手续,抵押登记证明在贷款全部还清之前由乙方保管;抵押登记事项发生变化依法需进行变更登记的，抵押人和乙方应办理变更登记。
      </p>
      <p class="text-indent">
        3.3.2.2借款人按照合同约定履行完毕各项义务后,乙方应积极协助抵押人办理注销登记手续。
      </p>
      <p class="text-indent">3.3.3 抵押物的处分。</p>
      <p class="text-indent">
        3.3.3.1
        如借款到期借款人未予清偿，乙方有权向约定管辖权的人民法院申请将抵押物拍卖、变卖，以所得价款用以抵偿借款人所欠债务。
      </p>
      <p class="text-indent">3.3.3.2 乙方处分抵押物时，抵押人应予积极配合。</p>
      <p class="text-indent">
        3.3.3.3 乙方在处分抵押物过程中的产生的实现债权的费用，应当从拍卖或变卖价款中优先扣除。
      </p>
      <p class="text-indent"><span class="font-weight-bold">第四条：甲方的义务</span></p>
      <p class="text-indent">
        4.1.甲方确认，当借款人未能按《借款合同》、《委托担保合同》约定履行相关义务，无论是否拥有其他反担保（包括但不限于保证、抵押、质押、保函等担保方式），乙方有权直接要求甲方中任一反担保人承担所有担保责任，而无须向借款人追偿，甲方保证在收到乙方第一次索付通知（书面、传真、信函、邮件、公告、电话、短信等）后三日内，即无条件按通知的要求将上述借款人所欠借款本金、利息、滞纳金、赔偿金、担保费及违约金等支付给乙方，其中借款人的逾期付款违约金计算至甲方实际支付日，上述索付通知书作为付款凭据，对甲方有约束力。
      </p>
      <p class="text-indent">
        4.1.1甲方确认，被担保的债权存在借款人自已提供物的担保时，乙方仍然有权可要求甲方先行承担连带还款责任。
      </p>
      <p class="text-indent">
        4.2
        反担保人承诺：发生下列情形之一，无需经反担保人同意，反担保人仍应继续按照约定履行担保责任：
      </p>
      <p class="text-indent">4.2.1 借款人、债权人与乙方协商同意变更借贷、保证条款；</p>
      <p class="text-indent">4.2.2 债权人宣布借款提前到期或展期的；</p>
      <p class="text-indent">4.2.3 乙方将其在本合同项下的权利转让给任何其他方的。</p>
      <p class="text-indent">
        4.2.4 乙方放弃借款人以自已的财产设定抵押权、抵押权顺位或者变更抵押权的；
      </p>
      <p class="text-indent">4.2.5 乙方放弃借款人以自已的财产设定质权的；</p>
      <p class="text-indent">4.3 保险。</p>
      <p class="text-indent">
        4.3.1
        如果乙方要求，抵押人/出质人应足额办理抵押物/质物保险，保险期限应不短于贷款期限满后两年。保险费用由借款人负担。
      </p>
      <p class="text-indent">
        4.3.2
        保险单中应当注明乙方为第一受益人，并且保险单中不应有任何限制乙方权益的条款。保险单中应当特别约定，一旦发生保险事故，保险人应将保险赔偿金直接划付乙方指定账户。
      </p>
      <p class="text-indent">
        4.3.3
        在借款人借款未全额清偿前，抵押人/出质人不得以任何理由中断或撤销保险；如保险中断或撤销，乙方有权代为办理保险手续，相关费用由借款人承担。
      </p>
      <p class="text-indent"><span class="font-weight-bold">第五条：通知</span></p>
      <p class="text-indent">发生下列情形之一，借款人和甲方应当立即通知乙方：</p>
      <p class="text-indent">
        5.1
        借款人和甲方的其他任何债务在到期（包括被宣布提前到期）后未予清偿，或者未予履行其应当承担的担保责任或其他义务；
      </p>
      <p class="text-indent">
        5.2 涉及刑事案件、诉讼、仲裁、纠纷，对其偿债或保证能力产生不利影响的；
      </p>
      <p class="text-indent">
        5.3
        地址、联系方式、工作单位发生变更，如不通知乙方，致使乙方向借款人和甲方送达通知等资料无法送达的，视为已送达；
      </p>
      <p class="text-indent">
        5.4 抵押物被查封、扣押、冻结、征用、被列入拆迁范围或发生权属争议的；
      </p>
      <p class="text-indent">
        5.5
        反担保人为法人或其他组织的，其经营机制发生变化，包括但不限于：股份制改革、承包、租赁、合并、分立、联营、合资或合作；歇业、解散、停业整顿、被吊销营业执照、被撤销工商行政登记；企业章程、法定代表人、股权等发生变更；
      </p>
      <p class="text-indent">5.6 影响或可能影响贷款本息按期足额偿还的其他情形。</p>
      <p class="text-indent"><span class="font-weight-bold">第六条：声明</span></p>
      <p class="text-indent">
        6.1
        甲方充分了解《借款合同》、《保证合同》、《委托担保合同》中的全部条款，向乙方提供反担保完全系自愿，甲方在《反担保合同》下的全部意思表示真实。
      </p>
      <p class="text-indent">6.2 甲方所提供给乙方的所有资料全部为真。</p>
      <p class="text-indent"><span class="font-weight-bold">第七条：义务与责任的连续性</span></p>
      <p class="text-indent">
        合同项下甲方所有义务和责任不因其财力、地位等状况而改变，或与其他单位签订的任何协议、合同以及不因甲方法定代表人变更、或公司合并、分立而免除。
      </p>
      <p class="text-indent">
        <span class="font-weight-bold">第八条：</span>
        <span>
          如甲方未按本合同的约定履行担保责任，由此造成的经济损失由甲方承担，同时甲方应向乙方支付借款金额
          5% 的违约金。
        </span>
      </p>
      <p class="text-indent"><span class="font-weight-bold">第九条：独立性。</span></p>
      <p class="text-indent">
        本合同不因《借款合同》、《保证合同》、《委托担保合同》的无效而影响本合同的效力。
      </p>
      <p class="text-indent">
        <span class="font-weight-bold">第十条：</span>
        <span>
          在履行本合同中如双方发生争议，应协商解决，经协商未果的，应向乙方住所地人民法院提起诉讼。
        </span>
      </p>
      <p class="text-indent">
        <span class="font-weight-bold">第十一条：</span>
        <span>本合同未尽宜事项，双方可以签订补充协议，补充协议与本合同具有同等法律效力。</span>
      </p>
      <p class="text-indent">
        <span class="font-weight-bold">第十二条：</span>
        <span>本合同按需设置，每份均具有同等的法律效力，自双方签字或盖章时生效。</span>
      </p>
      <div class="mt-5"></div>
      <div class="d-flex">
        <div>甲方：</div>
        <div class="border-bottom-dark"></div>
        <div>（签章）</div>
      </div>
      <div class="d-flex">
        <div>法定代表人（委托代理人）：</div>
        <div class="border-bottom-dark"></div>
        <div>（签章）</div>
      </div>
      <div class="d-flex">
        <div>乙方（担保方）：</div>
        <div class="border-bottom-dark"></div>
        <div>（签章）</div>
      </div>
      <div class="d-flex">
        <div>法定代表人（委托代理人）：</div>
        <div class="border-bottom-dark"></div>
        <div>（签章）</div>
      </div>
      <div class="text-right">
        <div class="my-5">
          <span class="text-decoration">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </span>
          <span>年</span>
          <span class="text-decoration">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </span>
          <span>月</span>
          <span class="text-decoration">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </span>
          <span>日</span>
        </div>
      </div>

      <register-contract-view-promise-page
        :guard="guard"
        :contract="contract"
        :relatedData="relatedData"
      ></register-contract-view-promise-page>

      <register-contract-view-material
        :contract="contract"
        :guard="guard"
      ></register-contract-view-material>
    </div>
  </div>
</template>

<script>
import { enumGuaMethodIndex, enumContractType } from '@/credit/plugins/enumTown'
import { printA4, exportDocx, nzhToMoney, nzhToNum } from '@vimi/utils-tool'
import RegisterContractViewPromisePage from '@/credit/views/county/mission/RegisterContractViewPromisePage'
import RegisterContractViewMaterial from '@/credit/views/county/mission/RegisterContractViewMaterial'

export default {
  components: {
    RegisterContractViewPromisePage,
    RegisterContractViewMaterial,
  },
  props: {
    contract: {
      type: Object,
      default: () => ({}),
    },
    guard: {
      type: Object,
      default: () => ({}),
    },
    relatedData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      enumContractType,
      exportLoading: false,
    }
  },
  computed: {
    replyFunds() {
      return this.contract.reply_funds || ''
    },
    guaMethodText() {
      return this.contract.loan_type || ''
    },
    replyFundsNum() {
      const funds = Number.parseFloat(this.replyFunds)
      return isNaN(funds) ? '' : funds
    },
    loanFundsChinese() {
      return this.replyFundsNum ? nzhToMoney(this.replyFundsNum * 1e4) : ''
    },
    loanYears() {
      return this.contract.load_years || ''
    },
    loanYearsChinese() {
      return nzhToNum(this.loanYears)
    },
    guardMethod() {
      return enumGuaMethodIndex[this.guard.gua_method] || ''
    },
    isPledge() {
      return this.guard.gua_method === '2'
    },
    guardRate() {
      return this.isPledge ? this.guard.gua_stock_right || '' : ''
    },
    printId() {
      return `print-wrap-${this.guard.gua_contract_id}`
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    printPage() {
      printA4(
        document.getElementById(this.printId).innerHTML,
        `
        body {font-family: SimSun;}
        .text-indent{text-indent: 2.4rem;}
        .text-decoration{text-decoration: underline;}
        .page-content {max-width: 794px;margin: 0 auto;font-size: 1.2rem;line-height: 2;}
        .border-bottom-dark {border-bottom: 1px solid #333; flex: 1;}
        .page-content-promise {margin: auto;font-size: 1.2rem;line-height: 2;page-break-before: always;}
        .flex-1 { flex: 1; }
        .page-content-promise {
          margin: 150px auto 0px auto;
         font-size: 1.2rem;
          line-height: 2;}
        .border-noprint {border: 1px solid $border-color;}
        .d-flex { display: flex; }
      `
      )
    },
    downloadDocx() {
      this.exportLoading = true
      exportDocx({
        content: document.getElementById(this.printId),
        filename: `反担保合同-${this.guard.gua_entity}`,
        style: `
           body {font-family: SimSun;}
        .text-indent{text-indent: 34px;}
        .mt-5 {margin-top: 30px}
        .my-5 {margin: 30px 0px}
        .text-decoration{text-decoration: underline;}
        .font-weight-bold{font-weight:bold;}
        .text-center{text-align: center;}
        .text-right{text-align: right;}
        .page-content {max-width: 794px;margin: 0 auto;font-size: 17px;line-height: 2;}
        .border-bottom-dark {border-bottom: 1px solid #333; flex: 1;}
        .flex-1 { flex: 1; }
        .d-flex { display: flex; }
        .d-flex-end { display: flex;  justify-content: flex-end;}
        `,
      })
        .then(() => {
          this.$message.success('导出word成功')
        })
        .finally(() => {
          this.exportLoading = false
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.page-content {
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 2;
}
.text-indent {
  text-indent: 2.4rem;
}
.text-decoration {
  text-decoration: underline;
}
.border-noprint {
  border: 1px solid $border-color;
}
.border-bottom-dark {
  flex: 1;
  border-bottom: 1px solid #333;
}
</style>
